<template>
  <div class="user">
    <div class="search" ref="searchRef">
      <user-search @queryClick="queryClick" @resetClick="resetClick" />
    </div>

    <div class="contenet">
      <user-content :searchH="searchH" ref="useContentRef" @newClick="newClick" @editClick="editClick" />
      <user-modal ref="userModalRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import userSearch from './components/user-search.vue'
  import userContent from './components/user-content.vue'
  import userModal from './components/user-modal.vue'
  import type { IUser } from '@/services/main/system/user/type'

  const searchRef = ref<any>()
  const searchH = ref<string>('')
  onMounted(() => {
    let seachH = window.getComputedStyle(searchRef.value).height
    searchH.value = seachH
  })

  const useContentRef = ref<InstanceType<typeof userContent>>()
  const userModalRef = ref<InstanceType<typeof userModal>>()
  function queryClick(searchForm: IUser) {
    useContentRef.value?.fetchUserListData(searchForm)
  }
  function resetClick() {
    useContentRef.value!.fetchUserListData()
  }
  function newClick() {
    userModalRef.value!.setDialogVisible()
  }
  function editClick(user: IUser) {
    userModalRef.value?.setDialogVisible(false, user)
  }
</script>

<style lang="scss" scoped>
  .user {
    .search {
      margin-bottom: 15px;
    }
  }
</style>
